<template>
  <div class="home">
    <div class="header">
      <div class="btn-list btn-list-left">
        <i
          :class="['el-icon-s-home']"
          @click="toPath(routesDict[0])"
          style="
            font-size: 34px;
            color: white;
            cursor: pointer;
            display: inline-block;
            margin-right: 25px;
          "
        ></i>
        <i
          :class="['el-icon-s-tools']"
          @click="toPath(routesDict[0])"
          style="
            font-size: 34px;
            color: white;
            cursor: pointer;
            display: inline-block;
            margin-right: 25px;
          "
        ></i>
        <div class="dateTime" style="top: -10px">
          <span class="time" style="margin-left: 30px">{{ time }}</span>
          <span>{{ date }}星期{{ week }}</span>
        </div>
        <div
          :class="topMenuActive == routesDict[1] ? 'btn-active' : 'btn'"
          @click="toPath(routesDict[1])"
        >
          采集点信息管理
        </div>
        <div
          :class="topMenuActive == routesDict[2] ? 'btn-active' : 'btn'"
          @click="toPath(routesDict[2])"
        >
          样本基本信息管理
        </div>
      </div>
      <h1 class="title">{{ title }}</h1>
      <div class="btn-list btn-list-right">
        <div
          :class="topMenuActive == routesDict[3] ? 'btn-active' : 'btn'"
          @click="toPath(routesDict[3])"
        >
          样本处理信息管理
        </div>
        <div
          :class="topMenuActive == routesDict[4] ? 'btn-active' : 'btn'"
          @click="toPath(routesDict[4])"
        >
          树轮成果管理
        </div>
        <i
          :class="['el-icon-s-home']"
          @click="toPath(routesDict[0])"
          style="
            font-size: 36px;
            color: white;
            cursor: pointer;
            display: inline-block;
            margin-right: 25px;
          "
        ></i>
        <i
          :class="['el-icon-message-solid']"
          @click="toPath(routesDict[0])"
          style="
            font-size: 36px;
            color: white;
            cursor: pointer;
            display: inline-block;
            margin-right: 25px;
          "
        ></i>
        <div class="weather">
          <img src="../assets/images/header/u22.png" alt="" />
          <span style="margin-top: 8px">晴24°C</span>
        </div>
      </div>
      <!-- <div class="nav-button right">
        右侧按钮 →

        <i
          :class="['el-icon-s-home']"
          @click="toPath(routesDict[0])"
          style="
            font-size: 36px;
            color: white;
            cursor: pointer;
            display: inline-block;
            margin-right: 25px;
          "
        ></i>
        <i
          :class="['el-icon-message-solid']"
          @click="toPath(routesDict[0])"
          style="
            font-size: 36px;
            color: white;
            cursor: pointer;
            display: inline-block;
            margin-right: 25px;
          "
        ></i>
      </div> -->
    </div>
    <div>
      <popInfo/>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import popInfo from "./home/pop.vue";

export default {
  name: "HomeView",
  components: {
    popInfo,
  },
  data() {
    return {
      time: dayjs().format("HH:mm:ss"),
      date: dayjs().format("YYYY-MM-DD"),
      title: "树木年轮生态实验室业务子系统",
      // routesDict: [
      //   { path: "/path1" },
      //   { path: "/path2" },
      //   { path: "/path3" },
      //   { path: "/path4" },
      // ],
      topMenuActive: 0,
    routesDict: {
      1: '/collectInfo',
      2: '/sampleInfo',
      3: '/sampleProcess',
      4: '/treeRing',
    }
    };
  },
  computed: {
    week() {
      const days = dayjs().day();
      const week = ["日", "一", "二", "三", "四", "五", "六"];
      return week[days];
    },
  },
  methods: {
    toPath(path) {
    this.$router.push(path);
    this.topMenuActive = path;
  }
  },
  mounted() {
    setInterval(() => {
      this.time = dayjs().format("HH:mm:ss");
    }, 1000);
  },
};
</script>

<style lang="scss" scoped>
// 顶部图片按钮的公共样式
@mixin topBtnImgStyle() {
  width: 18.6rem;
  height: 5rem;
  font-size: 1.4rem;
  line-height: 4rem;
  margin: 0 1.5rem;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
}
.home {
  height: 100vh;
  width: 100vw;
  background: url("../assets/images/header/u0_state0.jpg") no-repeat center
    center;
  background-size: cover;

  .header {
    // height: 120px;
    // width: 100%;
    // display: flex;
    // align-items: center;
    // justify-content: center; // 改为 center 以居中对齐标题
    // color: white;
    // background: url("../assets/images/header/u5.png") no-repeat center center;
    // background-size: cover;
    // position: relative; // 添加相对定位以适应标题位置调整
    height: 120px;
  width: 100%;
  display: flex;
  align-items: flex-start; // 将 align-items 改为 flex-start 来向上对齐子项
  justify-content: center;
  color: white;
  background: url("../assets/images/header/u5.png") no-repeat center center;
  background-size: cover;
  position: relative;
  padding-top: 20px; // 增加上边距来下移标题

    .btn-list {
      display: flex;
      top: 50%;
      transform: translate(0, -40%);
      position: absolute;
    }
    .btn-list-left {
      left: 1%;
      top: 40%;
    }
    .btn-list-right {
      right: 3%;
      top: 40%;
    }
    // .nav-button {
    //   padding: 10px 20px;
    //   font-size: 16px;
    //   border: none;
    //   cursor: pointer;//当鼠标悬停在按钮上时，鼠标指针变为手型指针
    //   background-color: rgba(0, 0, 0, 0.5);
    //   color: white;
    //   transition: background-color 0.3s;//当背景颜色发生变化时，会有 0.3 秒的平滑过渡动画

    //   &:hover {
    //     background-color: rgba(0, 0, 0, 0.7);
    //   }

    //   &.left {
    //     position: absolute;
    //     left: 20px;
    //   }

    //   &.right {
    //     position: absolute;
    //     right: 20px;
    //   }
    // }
    .btn {
      @include topBtnImgStyle;
      font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
      font-weight: 700;
      color: #ffffff;
      // background-image: url("~@/assets/images/btn-normal.png");
      -webkit-filter: brightness(120%);
      filter: brightness(120%);
      width: 10rem;
      height: 3.4rem;
      font-size: 14px;
      line-height: 3.4rem;
      padding-left: 5px;
      margin: 0 1.5rem 0 3rem;
      // border: 1px #fff solid;
      border-radius: 6px;
      // background-color: rgb(1, 57, 90);
      background-image: url("../assets/images/header/btn-left.png");

      .btn-active {
        cursor: pointer;
        @include topBtnImgStyle;
        color: #ffffff;
        font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
        font-weight: 700;
        // background-image: url("~@/assets/images/btn-active.png");
        -webkit-filter: brightness(120%);
        filter: brightness(120%);
        // background-color: rgba(17, 101, 148, 1);
        background-image: url("../assets/images/header/btn-left-a.png");
        width: 10rem;
        height: 3.4rem;
        font-size: 14px;
        line-height: 3.4rem;
        margin: 0 1.5rem;
        // border: 1px #fff solid;
        // border-radius: 6px;
      }
    }

    .title {
      // font-size: 36px;
      // font-weight: bold;
      // text-align: center;
      // line-height: 1.2;
      // margin: 0;
      font-size: 36px;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  margin: 0; // 移除上边距
    }
  }
  // 右侧按钮的未选中状态样式
.btn-list-right .btn {
  @include topBtnImgStyle;
  font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
  font-weight: 700;
  color: #ffffff;
  // background-image: url("~@/assets/images/btn-normal.png");
  -webkit-filter: brightness(120%);
  filter: brightness(120%);
  width: 10rem;
  height: 3.4rem;
  font-size: 14px;
  line-height: 3.4rem;
  margin: 0 1.5rem 0 3rem;
  // border: 1px #fff solid;
  border-radius: 6px;
  // background-color: rgb(1, 57, 90);
  background-image: url("../assets/images/header/btn-right.png");
}
// 右侧按钮的选中状态样式
.btn-list-right .btn-active {
  cursor: pointer;
  @include topBtnImgStyle;
  color: #ffffff;
  font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
  font-weight: 700;
  // background-image: url("~@/assets/images/btn-active.png");
  -webkit-filter: brightness(110%);
  filter: brightness(110%);
  // background-color: rgba(17, 101, 148, 1);
  background-image: url("../assets/images/header/btn-right-a.png");
  width: 10rem;
  height: 3.4rem;
  font-size: 14px;
  line-height: 3.4rem;
  margin: 0 1.5rem;
  // border: 1px #fff solid;
  // border-radius: 6px;
}

  .dateTime {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
    width: 15rem;
    position: absolute; // 使日期时间在页面上固定位置
    top: 20px;
    right: 20px;

    span {
      margin: 0;
    }

    .time {
      font-size: 24px;
      margin-bottom: 5px;
    }
  }
}
</style>
